<template>
  <!-- 推荐新闻页面 -->
  <div class="box">
    <!-- 下拉刷新标签 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 
        总结：
            onLoad不需要我们自己手动调用，因为他会发现没铺满自动去调用请求新的数据
            但是如果这一次数据加载完了，一定要把loading改成false,否则加载中的状态一直再显示
            如果你判断数据全部加载完了，就记得把finished改成true,那么他以后就不会再继续加载
     -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="已经到底了."
        @load="onLoad"
      >
        <van-cell :to="`/home/article?id=` + item.art_id"v-for="item in list" :key="item.art_id" :title="item.title">

           <template #label>
          <!-- 宫格  图片区域-->
          <van-grid :border="false" :column-num="item.cover.type">
            <!-- 图片跟cover里的images有关 -->
            <van-grid-item v-for="pic in item.cover.images">
              <van-image :src="pic" />
            </van-grid-item>
          </van-grid>
          <!-- 作者信息 -->
          <div class="message">
            <div>
          <span>{{ item.aut_name }}</span> 
          <span style="margin:0px 15px"> 评论数:{{item.comm_count}}</span>
         <span>{{ item.pubdate | relativeTime }}</span>
          <van-icon name="cross" style="float:right;"></van-icon>
            </div>
          </div>
          </template>

        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { articleListAPI } from "@/api";
export default {
  // 父必须传值
  props: {
    channel_id:{
      required:true
    }
  },
  data() {
    return {
      
      list: [],// 保存数据的数组
      loading: false, //标记本次加载状态
      finished: false,//用来标记是否加载完毕

      timestamp: Date.now(),// 查新闻的时间戳，默认是当前时间戳
      isLoading:true
    };
  },
  methods: {
    // 会被自动调用
    async onLoad() {
      // 发请求获取数据
      let res = await articleListAPI({
        // 频道id
        channel_id: this.channel_id,
        // 要查最新新闻，那就传当前时间戳
        timestamp: this.timestamp,
      });

      // 拿到数据后赋值给数组
      // this.list = res.data.data.results
      // 上面的代码有一个问题，数据加时会不断地覆盖前面渲染的数据，导致不会保存之前请求到的数据。所以我们要用追加进行优化
      this.list.push(...res.data.data.results)

       // 将数据中的时间戳赋值给timestamp
      this.timestamp = res.data.data.pre_timestamp

      // 当本次加载完成后进行下次加载
      this.loading = false

      // 判断数据是否加载完毕，加载完毕把finished改成true
      if (this.timestamp == null) {
        this.finished = true;
      }
       // 判断数据是否加载完毕
      if (!this.timestamp) {
        // 代码进到这里说明数据加载完毕，需要停止加载
        this.finished = true
      }
    },
    //下拉刷新
         async onRefresh () {
      let res = await articleListAPI({
        channel_id: this.channel_id,
        timestamp: Date.now()
      })
      // 将数据中的时间戳赋值给timestamp
      this.timestamp = res.data.data.pre_timestamp
      // 注意: 下拉刷新是为了替换最新的新闻
      this.list = res.data.data.results

      this.isLoading = false
    }
    
    
  },
};
</script>

<style scoped lang="less">
.box {
  // 弹性高度
  position: fixed;
  // 定位后，div就不会宽度铺满
  // 所以要自己指定好宽度
  // viewport width（视口宽度）
  width: 100vw;
  left: 0;
  top: 90px;
  bottom: 50px;
  overflow: auto;
  .cell {
    // display: flex;
    flex-direction: column;
    .message {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
